<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, 
		initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="format-detection" content="telephone=no">
		<title>html title</title>

		<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
		<title>Insert title here</title>
		<style>
			.tab{
				height:45px;
				font-size:1em;
				line-height:40px;
				color:silver
			}
			.titlebar,.titlebar i,.tab.active{
				background-color:#18B2ED;
				color:white;
				font-weight:bold;
			}
			
		</style>
	</head>
	<body>
		<div id="aside_container">
		</div>
		<div id="section_container">
			<section id="main_section" data-role="section" class="active">
			<header>
				<div class="titlebar text-center">
					<a class="left"><i class="icon-arrowreply size28" ></i></a>
					<h2>title</h2>
					<a class="right" ><i class="icon-menu-fill size28"></i></a>
				</div>
			</header>
			<article id="main_article" data-transition="slide"  data-role="article" class="active" style="top:45;bottom:40;">
				<div id="main_list" data-scroll="pull" style="height:200px">
				<div class="scroller">
						<ul >
							<li style="padding:10px">
								<div style="height:10px;line-height:25px">我是主题</div><br/>
								<small>我是副标题</small>
							</li>
							<li style="padding:10px">
								<div style="height:10px;line-height:25px">我是主题</div><br/>
								<small>我是副标题</small>
							</li>
							<li style="padding:10px">
								<div style="height:10px;line-height:25px">我是主题</div><br/>
								<small>我是副标题</small>
							</li>
							<li style="padding:10px">
								<div style="height:10px;line-height:25px">我是主题</div><br/>
								<small>我是副标题</small>
							</li>
							<li style="padding:10px">
								<div style="height:10px;line-height:25px">我是主题</div><br/>
								<small>我是副标题</small>
							</li>
							<li style="padding:10px">
								<div style="height:10px;line-height:25px">我是主题</div><br/>
								<small>我是副标题</small>
							</li>
							<li style="padding:10px">
								<div style="height:10px;line-height:25px">我是主题</div><br/>
								<small>我是副标题</small>
							</li>
							<li style="padding:10px">
								<div style="height:10px;line-height:25px">我是主题</div><br/>
								<small>我是副标题</small>
							</li>
							<li style="padding:10px">
								<div style="height:10px;line-height:25px">我是主题</div><br/>
								<small>我是副标题</small>
							</li>
							<li style="padding:10px">
								<div style="height:10px;line-height:25px">我是主题</div><br/>
								<small>我是副标题</small>
							</li>
						</ul>
					</div>
				</div>
			</article>
			<article id="page2_article" data-transition="slide"  data-role="article" class="" style="top:45;bottom:40;">
				<div id="refresh_list" data-scroll="pull" style="height:350px">
				<div class="scroller">
						<ul id="list">
							<li style="padding:10px">
								<div style="height:10px;line-height:25px">我是主题</div><br/>
								<small>我是副标题</small>
							</li>
							<li style="padding:10px">
								<div style="line-height:25px">我是主题</div><br/>
								<small>我是副标题</small>
							</li>
							<li style="padding:10px">
								<div style="line-height:25px">我是主题</div><br/>
								<small>我是副标题</small>
							</li>
							<li style="padding:10px">
								<div style="line-height:25px">我是主题</div><br/>
								<small>我是副标题</small>
							</li>
							<li style="padding:10px">
								<div style="line-height:25px">我是主题</div><br/>
								<small>我是副标题</small>
							</li>
							<li style="padding:10px">
								<div style="height:10px;line-height:25px">我是主题</div><br/>
								<small>我是副标题</small>
							</li>
							<li style="padding:10px">
								<div style="height:10px;line-height:25px">我是主题</div><br/>
								<small>我是副标题</small>
							</li>
						</ul>
					</div>
				</div>
			</article>
			<article id="page3_article" data-transition="slide"  data-role="article" class="" style="top:45;bottom:40;">
				<span class="button block bg-8" id="load" >点我加载</span>
				<div id="page3_lst" data-scroll="verticle" style="height:300px;border:1px solid;">
					<div class="scroller">
						<ul id="lstmain">
							<li style="padding:10px">
								<div style="height:10px;line-height:25px" class="color-9">可见样例</div><br/>
								<small class="color-9">我是副标题</small>
							</li>
							<script id="lst_temp" type="text/html">
							 <%for(var i=0;i<list.length;i++){%>	
							  <li style="padding:10px">
							  	<div style="height:10px;line-height:25px">
							  		<%=list[i].title%></div>
							  		<br/>
							  	<small><%=list[i].sub_title%></small>
							  </li>
							  <%}%>
							</script>
						</ul>
					</div>
				</div>
				
			</article>
			<footer>
				<ul class="menubar">
					<li class="tab active text-center" data-role="tab" data-toggle="article" href="#main_article">
						<i class="icon icon-app"></i>
						<label >滑动</label>
					</li>
					<li class="tab text-center" data-role="tab"  data-toggle="article" href="#page2_article">
						<i class="icon icon-file"></i>
						<label >下拉刷新</label>
					</li>
					<li class="tab text-center" data-role="tab"  data-toggle="article" href="#page3_article">
						<i class="icon icon-gear"></i>
						<label >数据注入</label>
					</li>
				</ul>
			</footer>
			</section>
		</div>
		<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
		<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
		<script src="../assets/third/arttemplate/template-native.js"></script>
		<script src="../assets/third/seedsui/plugin/seedsui/seedsui.min.js"></script>
		<script src="../assets/third/iscroll/iscroll-probe.js"></script>
		<script src="../assets/agile/js/agile.js"></script>
		<script src="../assets/app/js/app.seedsui.js"></script>
		<script>
			$(function(){
				var myiscroll = A.Scroll('#main_list')
				myiscroll.refresh();
				
				
			  $('#refresh_list').on('refreshInit', function(){
				var refresh = A.Refresh(this);
				//refresh.setConfig({
					//pullDownOpts : {
						//normalLabel : '继续下拉',
			    		//releaseLabel : '可以啦可以啦',
			    		//refreshLabel : '终于松开啦'
					//},
					//pullUpOpts : {
						//normalLabel : '上拉试试',
			    		//releaseLabel : '有完没完',
			    		//refreshLabel : '哎呦我去'
					//}
				//});
				refresh.on('pulldown',function(){
					//alert('我是下拉！');
					var html = '<li style="padding:10px">\
								<div style="height:10px;line-height:25px;color:blue">我是上边来的</div><br/>\
								</li>';
					$('#list').prepend(html);
					refresh.refresh();
				});
				refresh.on('pullup',function(html){
					//alert('我是上拉！');
					var html = '<li style="padding:10px">\
								<div style="height:10px;line-height:25px;color:red">我是下边来的</div><br/>\
								</li>';
					$('#list').append(html);
					refresh.refresh();
				});
			});
			
			var baseint  = 0
			$('#load').on(A.options.clickEvent,function(){
				//获取数据
			    var json = {};
			    json.list = new Array();
				for(var i=0;i<3;i++){
					var item = {};
					item.title = "新载标题（"+(baseint)+"）";
					item.sub_title = "副标题["+(baseint)+"]";
					json.list.push(item);
					baseint++;
				}
				//数据与模板渲染出html结果
				//var html = A.template('#lst_temp').render(json);
				////注入指定dom内
				//$('#lstmain').append(html);
				//A.Scroll('#page3_lst').refresh();
				
				A.template('#lst_temp').renderAfter(json,function(h){
					A.Scroll('#page3_lst').refresh();
				});
			});
			
			});
		</script>
	</body>
</html>